import React, { FC } from 'react';
import { Link, useSelector } from 'umi';

const itemStyle = {
  margin: '4px 8px',
  flex: '0 0 200px',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipse',
} as any;

const MenusPage: FC = () => {
  const routes: any[] = useSelector((state: any) => state.global.routes[0]?.routes);
  const blockRoutes = routes[2]?.routes?.slice(1);
  const templatesRoutes = routes[3]?.routes?.slice(1);
  const path = location.pathname.slice(1);
  // eslint-disable-next-line no-nested-ternary
  const list = path === '' ? [...blockRoutes, ...templatesRoutes] : path === 'blocks' ? blockRoutes : templatesRoutes;

  return (
    <section style={{ display: 'flex', flexFlow: 'row wrap' }}>
      {list.map((r: any) => (
        <div key={r.path} style={itemStyle}>
          <Link
            style={{
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis',
              display: 'block',
              width: '200px',
              overflow: 'hidden',
              fontSize: 16,
            }}
            to={r.path}
          >
            {r.path?.split(`/`)[2]}
          </Link>
        </div>
      ))}
    </section>
  );
};

export default MenusPage;
